<template>
  <div>
    <div class="checkBoxes">
      <i-checkbox-group @change="handleFruitChange">
        <i-checkbox
          v-for="(item,index) in fruit"
          :key="index"
          :value="item.name"
          :checked="item.isBool"
          :position="position"
          color="#5b94f6"
        ></i-checkbox>
      </i-checkbox-group>
      <div class="checkhint">需配置二级分类，如座位号、包厢号等</div>
    </div>
    <div
      class="linkTowClassify"
      @click="TowClassifyBtn"
      v-if="TowClassifyBool"
    >配置二级分类</div>
    <div class="buttonBox">
      <button
        class="handleClick"
        @click="handleClick"
        type="primary"
        shape="circle"
        size="small"
      >保存</button>
    </div>
  </div>
</template>

<script>
import { UPDATE_SHOP_DECORATION_API } from '@/api'
export default {
  components: {},
  data () {
    return {
      fruit: [
        {
          id: '0',
          name: '快递物流',
          isBool: false
        },
        {
          id: '1',
          name: '到店自提',
          isBool: false
        },
        {
          id: '2',
          name: '商家上门',
          isBool: false
        },
        {
          id: '3',
          name: '店内消费',
          isBool: false
        }
      ],
      receiveArr: [], // 接收上个页面的数组
      position: 'right',
      TowClassifyBool: false, // 二级分类
      dataArr: [] // 传走的数据
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.init()
  },
  methods: {
    handleFruitChange (e) {
      const vm = this
      for (let i = 0; i < vm.fruit.length; i++) {
        if (e.mp.detail.value === vm.fruit[i].name) {
          vm.fruit[i].isBool = !vm.fruit[i].isBool
        }
      }
      if (vm.fruit[3].isBool) {
        vm.TowClassifyBool = true
      } else {
        vm.TowClassifyBool = false
      }
    }, // 选项框chage事件
    TowClassifyBtn () {
      this.$router.push('/pages/shop-management/shop-fitment-tow/main')
    }, // 配置二级分类
    unique (a) {
      return a
        .concat()
        .sort()
        .filter(function (item, pos, ary) {
          return !pos || item !== ary[pos - 1]
        })
    }, // 去重
    handleClick () {
      const vm = this
      for (let i = 0; i < vm.fruit.length; i++) {
        if (vm.fruit[i].isBool) {
          vm.dataArr.push(vm.fruit[i].id)
        }
      }
      let data = vm.unique(vm.dataArr)
      let params = {
        shippingMode: data.join(','),
        shopId: vm.account.shopId
      }
      UPDATE_SHOP_DECORATION_API(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('服务方式修改成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 保存按钮
    init () {
      const vm = this
      vm.dataArr = []
      vm.receiveArr = vm.$root.$mp.query.shippingMode.split(',')
      vm.fruit.forEach(_ => {
        _.isBool = vm.receiveArr.includes(_.id)
      })
      if (vm.fruit[3].isBool) {
        vm.TowClassifyBool = true
      } else {
        vm.TowClassifyBool = false
      }
    }
  },
  onUnload () {
    // 之前存的缓存 应该用不着了
    // this.$cookie.remove('shippingMode')
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';
.checkBoxes {
  position: relative;
  .checkhint {
    position: absolute;
    font-size: 10px;
    color: #949494;
    bottom: 0;
    left: 14px;
  }
}
.linkTowClassify {
  font-size: 14px;
  color: #3f51b5;
  line-height: 14px;
  width: 340px;
  margin: 20px auto 0;
}
.buttonBox {
  margin: 100px 0 0;
  .handleClick {
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    font-size: 14px;
    border: 0 !important;
    position: relative;
    text-decoration: none;
    height: 44px;
    line-height: 44px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    margin: 10px;
    background: #508ff9;
    border-radius: 25px;
  }
}
</style>
